<template>
    <div class="module">
        <Main :showTitle="true">
            <template v-slot:left>
                <div class="left-part-container">
                    <div class="left-title">
                        <img class="left-title" src="@/assets/module/blank-title.png" alt="">
                        <span>生育期需水规律</span>
                    </div>
                    <div class="loop">
                        <img class="left-part-img" src="@/assets/module/left-title-1.png" alt="">
                        <img class="right-part-img" src="@/assets/module/left-title-2.png" alt="">
                        <div class="left-btn" @click="handleNameLoop('left')"></div>
                        <div class="right-btn"  @click="handleNameLoop('right')"></div>
                        <div class="loop-name">
                            <div>
                                {{loop[loopIndex].name}}
                            </div>
                        </div>
                    </div>
                    <div class="time">
                        <div class="time-title">历时</div>
                        <div class="time-intro">
                            {{loop[loopIndex].date}}天左右 ({{loop[loopIndex].timing}})
                        </div>
                    </div>
                    <div class="effect">
                        <div class="effect-title">水量影响</div>
                        <div class="effect-intro">
                            {{loop[loopIndex].desc}}
                        </div>
                    </div>
                    <div class="tree">
                        <img src="@/assets/module/tree.png"  alt="">
                    </div>
                    <div class="chart-area">
                        <ModuleLine />
                    </div>
                </div>
            </template>
            <template v-slot:right>
                <div class="monitor-right-part-1">
                    <div class="right-title">
                        <img class="right-title" src="@/assets/module/blank-title.png" alt="">
                        <span>水平衡相关指标</span>
                    </div>
                    <div class="date"><DatePicker @getTime="getTime" /></div>
                    <div style="margin-left: 14px;margin-top: 15px">
                        <TimeLine title="蒸散量变化" :dispersion-data="dispersionData" type="et0"  height="185px"/>
                    </div>
                    <div class="dot-line"></div>
                    <div style="margin-left: 14px;margin-top: 15px">
                        <TimeLine title="降雨量日变化" :dispersion-data="dispersionData" type="rain" height="185px"/>
                    </div>
                    <div class="dot-line"></div>
                    <div style="margin-left: 14px;margin-top: 15px">
                        <TimeLine title="有效降雨量日变化" :dispersion-data="dispersionData" type="valid_rain" height="185px"/>
                    </div>
                    <div class="dot-line"></div>
                    <div style="margin-left: 14px;margin-top: 15px">
                        <TimeLine title="需灌水量" :dispersion-data="dispersionData" type="irrigate" height="185px"/>
                    </div>
                    <div class="calc-btn" @click="handleShowCalc">
                        灌溉水量计算器
                    </div>
                </div>
                <div class="calc-area" v-if="showCalc">
                    <div class="monitor-right-part-2" >
                        <img class="right-title" src="@/assets/module/calc-title.png" alt="">
                        <div class="calc-panel">
                            <div class="calc-value">10.23</div>
                            <div class="calc-uint">万m³</div>
                        </div>
                        <div class="calc-panel">
                            <div :class="['calc-placeholder',res?'calc-value-active':'']">{{res?res:"灌溉时长结果"}}</div>
                            <div class="calc-uint">小时</div>
                        </div>
                        <div class="calc-form">
                            <div class="calc-form-item">
                                <div class="calc-form-label">土壤类型</div>
                                <el-select v-model="earthType" placeholder="请选择">
                                    <el-option
                                            v-for="item in earthTypeOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">种植面积(hm²)</div>
                                <el-input v-model="area" />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">种植密度(棵/hm²)</div>
                                <el-input v-model="density" />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">当前日期</div>
                                <el-date-picker
                                        v-model="dateTime"
                                        type="date"
                                        placeholder="选择日期"
                                        @change="setCurrentLoop"
                                        value-format="MM-dd"
                                >
                                </el-date-picker>
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">当前作物期</div>
                                <el-input :value="currentLoop" />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">降雨量(mm)</div>
                                <el-input v-model="rainfall_sensor" />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">有效降雨量(mm)</div>
                                <el-input v-model="effective_rainfall"  />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">作物蒸散量(mm)</div>
                                <el-input :value="evaporation" />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">灌溉量(mm)</div>
                                <el-input :value="evaporation-effective_rainfall" />
                            </div>
                            <div class="calc-form-item">
                                <div class="calc-form-label">滴灌流速(mL/s)</div>
                                <el-input v-model="speed" />
                            </div>
                        </div>
                        <div class="action-foot">
                            <div class="close-btn" @click="handleShowCalc">关闭</div>
                            <div class="calc-submit" @click="calcRes">计算</div>
                        </div>
                    </div>
                </div>
            </template>
        </Main>
    </div>
</template>

<script>
    import Main from "./Main";
    import ModuleLine from "../component/ModuleLine";
    import DatePicker from "../component/DatePicker";
    import TimeLine from "../component/TimeLine";
    import {getCurrentData, getEvaporation, getHistoryData, getWeather,dispersionQuery} from "../api/home";
    import moment from "moment"

    export default {
        components: {Main,ModuleLine,DatePicker,TimeLine},
        name: "module",
        data(){
            return{
                res:0,
                showCalc:false,
                loopIndex:0,
                loop:[
                    {
                        name:'春芽开放期',
                        date:'30',
                        timing:'2月下旬-3月下旬',
                        desc:'春梢抽生的数量和质量，影响到长势和产量。如缺水，春梢萌发推迟，抽梢纤弱，开花不整齐，花期延长，造成大量落蕾落花，降低产量',
                        range:['02-25','03-25']
                    },
                    {
                        name:'花蕾期',
                        date:'20',
                        timing:'3月下旬-4月上旬',
                        desc:'积水或者干旱缺水都会造成生理活动受阻，引起落花落果',
                        range:['03-26','04-05']
                    },
                    {
                        name:'开花坐果期',
                        date:'70',
                        timing:'3月-6月',
                        range:['04-06','06-25'],
                        desc:'一般柑橘座果率仅有1~5%，若花果脱落过量将直接影响座果率和产量。在柑橘萌芽座果阶段，需要的水分比较多，南方降水量基本可以满足生长的需要。但是因为土壤过于潮湿，容易出现板结，也对根部的生长不利。如果地里有存水，排水工作要做好。遇到高温干旱的天气，要及时进行灌水，来降低土壤的温度'
                    },
                    {
                        name:'果实膨大期',
                        date:'120',
                        timing:'6月-10月',
                        range:['06-26','10-25'],
                        desc:'历时约4个月，该期中果实各部细胞的体积迅速增长，叶片光合作用也非常强烈，对养分和水分的需要量剧增，若遇高温伏旱，叶的蒸腾量更大，导致果实生长缓慢或停止'
                    },
                    {
                        name:'果实着色期',
                        date:'80',
                        timing:'10月-次年1月',
                        range:['10-26','12-30'],
                        desc:'该期果实生长减缓，除囊瓣略有增大外，其余各部分都逐渐停止增长。柑橘收获之前一个月，需进行控水，适当控水，果实甜度能更佳'
                    },
                    {
                        name:'成熟采收期',
                        date:'50',
                        timing:'次年1-2月',
                        range:['01-01','02-24'],
                        desc:'柑橘收获之后到第二年的三月份，温度较低降雨较少，柑橘收获后，树长势较弱，若遇到连续干旱天气，落叶会非常明显，对第二年柑橘产量会造成影响。一般柑橘收获之后，都需要充分浇水施肥'
                    }
                    ],
                loopName:['春芽开放期','花蕾期','开花做果期','果实膨大期','果实着色期','成熟采收期'],
                earthType:'0',
                earthTypeOptions:[
                    {
                        label:'砂壤土',
                        value:'1'
                    },
                    {
                        label:'壤土',
                        value:'2'
                    },
                    {
                        label:'粘土',
                        value:'3'
                    }
                ],
                dateTime:new Date(),
                currentLoop:'',
                area:0.22 , //面积,
                density:497, // 密度,
                rainfall_sensor:'',// 降雨量
                effective_rainfall:'' ,//有效降雨
                CurrentData:null,
                evaporation:'' ,// 作物蒸散量
                wind_speed_sensor:0, //风速
                speed:5,
                dispersionData:[]
            }
        },
        watch:{
            earthType:function(value){
                switch (value) {
                    case '1':
                        if(this.rainfall_sensor<50) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.55).toFixed(2)
                        }
                        if(this.rainfall_sensor>=50 && this.rainfall_sensor<=80) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.5).toFixed(2)
                        }
                        if(this.rainfall_sensor>80 && this.rainfall_sensor<=120) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.45).toFixed(2)
                        }
                        if(this.rainfall_sensor>120) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.35).toFixed(2)
                        }
                    case '2':
                        if(this.rainfall_sensor<50) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.6).toFixed(2)
                        }
                        if(this.rainfall_sensor>=50 && this.rainfall_sensor<=80) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.55).toFixed(2)
                        }
                        if(this.rainfall_sensor>80 && this.rainfall_sensor<=120) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.50).toFixed(2)
                        }
                        if(this.rainfall_sensor>120) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.40).toFixed(2)
                        }
                    case '3':
                        if(this.rainfall_sensor<50) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.5).toFixed(2)
                        }
                        if(this.rainfall_sensor>=50 && this.rainfall_sensor<=80) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.45).toFixed(2)
                        }
                        if(this.rainfall_sensor>80 && this.rainfall_sensor<=120) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.40).toFixed(2)
                        }
                        if(this.rainfall_sensor>120) {
                            this.effective_rainfall = (this.rainfall_sensor * 0.30).toFixed(2)
                        }
                }
                console.log(value)
            }
        },
        mounted() {
            this.setCurrentLoop(this.dateFormat('mm-dd',this.dateTime))
            this.getCurrentData('a')
            this.getEvaporation()
            this.getTime(new Date(new Date().toLocaleDateString()).getTime())
        },
        methods:{
            handleNameLoop(direction){
                let tempArr = this.loop
                let first = tempArr[0]
                let last = tempArr[tempArr.length-1]
                if(direction === 'right'){
                    tempArr.shift()
                    tempArr.push(first)
                }else {
                    tempArr.unshift(last)
                    tempArr.pop()
                }
                this.loop = tempArr
            },
            handleShowCalc(){
                this.showCalc = !this.showCalc
            },
            setCurrentLoop(value){
                const year = (new Date()).getFullYear()
                const temp = this.loop.filter(item=>{
                    return new Date(year+"-"+item.range[0]) <=  new Date(year+"-"+value) &&  new Date(year+"-"+value)<=new Date(year+"-"+item.range[1])
                })[0]
                this.currentLoop = temp.name
                this.loopIndex = this.loop.indexOf(temp)
            },
            getCurrentData(LandIds) {
                getCurrentData(LandIds).then(res => {
                    this.CurrentData = res.data.data
                    this.rainfall_sensor = this.CurrentData.rainfall_sensor
                    this.earthType = '1'
                    this.wind_speed_sensor = this.CurrentData.wind_speed_sensor
                    this.getEvaporation()
                })
            },
            async getEvaporation(){
               const temp = await  getWeather({
                   "area": "重庆",
               })
               const weatherData = temp.data.showapi_res_body.f1
                const today = moment().format("yyyy-MM-DD")
                let time = moment(today+" "+weatherData.sun_begin_end.split("|")[1]).diff(moment(today+" "+weatherData.sun_begin_end.split("|")[0]))
                const hours=Math.floor(time/(3600*1000))
                getEvaporation({
                    yearDay:moment(today).dayOfYear(),
                    Tmean:Math.floor((weatherData.day_air_temperature+weatherData.night_air_temperature)/2),
                    Tmax:Math.floor(weatherData.day_air_temperature),
                    Tmin:Math.floor(weatherData.night_air_temperature),
                    RHmean:Math.floor(this.CurrentData.air_humidity),//湿度
                    u: this.wind_speed_sensor,
                    sunshineHour:Math.floor(hours),
                    DEM:29.4591,
                    latitude:106.3580
                }).then(res=>{
                    this.evaporation = res.data.count || 0
                })
            },
            calcRes(){
                this.res =((this.evaporation-this.effective_rainfall)/(this.density*this.speed)).toFixed(4)+""
            },
            getTime(value) {
                // const currentTime =this.dateFormat('YYYY-mm-dd HH:MM:SS',new Date())
                dispersionQuery({
                    "landId": "a",
                    "startTime": (new Date(value)).getTime(),
                    "endTime": (new Date()).getTime()
                }).then(res => {
                    this.dispersionData = res.data.data
                })
            },
            dateFormat(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
        }
    }
</script>

<style lang="less">
    .module {
        .left-part{
            margin-top: 30px;
            height: 1008px;
        }
        .left-part-container{
            position: absolute;
            width: 380px;
            height: 1008px;
            box-sizing: border-box;
            /*border: 1px solid rgba(77,77,77,1);*/
        }
        /*.monitor-right-part-2{*/
        /*    position: absolute;*/
        /*    left: -400px;*/
        /*}*/
        .left-title,.right-title{
            margin-left: -1px;
            position: relative;
            span{
                position: absolute;
                left: 15px;
                top: 10px;
                font-family: ziticqtezhanti;
                font-size: 24px;
                color: #FFFFFF;
                letter-spacing: 1px;
                text-shadow: 0 0 4px #FFFFFF;
            }
        }
        .loop{
            display: flex;
            width: 380px;
            height: 47px;
            position: absolute;
            margin-top: 20px;
            img{
                width: 168px;
                height: 100%;
            }
            .left-part-img{
                position: absolute;
                top: 0;
                left: 0;
            }
            .right-part-img{
                position: absolute;
                top: 0;
                right: 0;
            }
            .left-btn{
                width: 0;
                height: 0;
                z-index: 1;
                border-top: 5px solid transparent;
                border-right: 10px solid #fff;
                border-bottom: 5px solid transparent;
                position: absolute;
                top: 18px;
                left: 117px;
                cursor: pointer;
            }
            .right-btn{
                width: 0;
                height: 0;
                z-index: 1;
                border-top: 5px solid transparent;
                border-left: 10px solid #fff;
                border-bottom: 5px solid transparent;
                position: absolute;
                top: 18px;
                right: 117px;
                cursor: pointer;
            }
            .loop-name{
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: ziticqtezhanti;
                font-size: 20px;
                color: #FFFFFF;
                letter-spacing: 0;
                text-align: center;
                text-shadow: 0 0 8px #F8733B;
                font-weight: 400;
            }
        }
        .time{
            margin-top: 80px;
            margin-left: 30px;
            .time-title{
                font-size: 14px;
                color: #FFFFFF;
            }
            .time-intro{
                font-size: 20px;
                color: #07FFFF;
            }
        }
        .effect{
            margin-top: 15px;
            margin-left: 30px;
            width: 320px;
            .effect-title{
                font-size: 14px;
                color: #FFFFFF;
            }
            .effect-intro{
                height: 140px;
                font-size: 16px;
                color: #07FFFF;
            }
        }
        .tree{
            text-align: center;
            margin-top: 20px;
            img{
                width: 260px;
                height: 374px;
            }
        }
        .date{
            padding-left: 14px;
            margin-top: 10px;
        }
        .calc-btn{
            width: 356px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 20px auto 10px;
            font-size: 22px;
            color: #F8ECEC;
            text-shadow: 0 0 8px #F8733B;
            background: #482006;
            border: 1px solid rgba(248,115,59,1);
            cursor: pointer;
        }
        .calc-area{
            position: absolute;
            left: -420px;
            top: 0px;
            width: 380px;
            padding: 10px;
            height: 880px;
            background: rgba(7,7,7,0.84);
            border: 1px solid rgba(77,77,77,1);
            border-radius: 6px;
            .monitor-right-part-2{
                position: absolute;
                width: 380px;
                box-sizing: border-box;
                border: 1px solid rgba(77,77,77,1);
                display: flex;
                flex-direction: column;
                align-items: center;
                z-index: 10;
            }
            .calc-panel{
                width: 360px;
                height: 60px;
                font-family: 'ziticqtezhanti';
                margin-top: 10px;
                box-sizing: border-box;
                padding: 16px;
                background: #070707;
                border: 1px solid #4D4D4D;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .calc-value,.calc-placeholder{
                    font-size: 36px;
                    color: #FFFFFF;
                }
                .calc-value-active{
                    color: #FFFFFF !important;
                }
                .calc-placeholder{
                    color: #4D4D4D;
                }
                .calc-uint{
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }
            .calc-form{
                width: 360px;
                box-sizing: border-box;
                padding: 0 10px;
                .calc-form-item{
                    display: flex;
                    padding: 10px;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px solid #4D4D4D;;
                    .calc-form-label{
                        font-size: 14px;
                        color: #FFFFFF;
                    }
                    .el-input{
                        width: 200px;
                        height: 40px;
                        font-family: 'ziticqtezhanti';
                        .el-input__inner{
                            width: 220px;
                            height: 40px;
                            background: rgba(7,7,7,0.30);
                            border-radius: 0;
                            border: 1px solid #4D4D4D;
                            padding: 10px 10px 10px 30px;
                            font-size: 14px;
                            color: #F8733B;
                        }
                        .el-input__icon{
                            color: #F8733B;
                        }
                    }
                }
            }
            .action-foot{
                width: 100%;
                box-sizing: border-box;
                padding: 20px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .close-btn{
                    width: 120px;
                    height: 36px;
                    line-height: 36px;
                    box-sizing: border-box;
                    background: #333333;
                    border: 1px solid #7B7B7B;
                    font-size: 16px;
                    color: #F8ECEC;
                    text-align: center;
                    font-weight: 700;
                    cursor: pointer;
                }
                .calc-submit{
                    width: 226px;
                    height: 36px;
                    line-height: 36px;
                    background: #482006;
                    box-sizing: border-box;
                    border: 1px solid #F8733B;
                    font-size: 16px;
                    color: #F8ECEC;
                    text-align: center;
                    font-weight: 700;
                    cursor: pointer;
                }
            }
        }
        .monitor-right-part-1{
            /*border: 1px solid rgba(77,77,77,1);*/
        }
    }
</style>
